<script setup lang="ts">
import { ref } from 'vue'
import backgPhone from '@/common/components/backg-login/backg-phone.vue'
import backgQrcode from '@/common/components/backg-login/backg-qrcode.vue'
import backgSwitch from '@/common/components/backg-login/backg-switch.vue'

// 定义显示模式
const currentMode = ref('phone')

// 切换登录模式
const handleSwitchLoginMode = (mode: string) => {
  currentMode.value = mode
}
</script>

<template>
  <div class="login">
    <a-row :gutter="12" class="login-row">
      <!-- 背景图片部分 -->
      <a-col :span="14" style="background-color: #f5f5f5">
        <div class="login-row-image" />
      </a-col>

      <!-- 内容部分 -->
      <a-col :span="10" class="login-row-content">
        <div style="width: 400px">
          <!-- 手机号登录 -->
          <backg-phone v-if="currentMode === 'phone'"></backg-phone>
          <!-- 扫码登录 -->
          <backg-qrcode v-if="currentMode === 'qrcode'"></backg-qrcode>
          <!-- 切换登录 -->
          <backg-switch @switchLoginMode="handleSwitchLoginMode"></backg-switch>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100vh;

  &-row {
    height: 100%;

    &-image {
      width: 100%;
      height: 100%;
      background-image: url('../../assets/common/login_back.png');
      background-repeat: no-repeat;
      background-size: cover;
    }
    &-content {
      display: flex;
      justify-content: center;
      //   flex-direction: column;
      align-items: center;
      background-color: #fff; /* 背景颜色 */
    }
  }

  .login-input {
    margin-bottom: 16px;
  }
}
</style>
